/*
 const [state,setSatete] = useState([])
initBoolean
{
realName: true,
age: true 
}

initState
{
realName: {
state,
setState
},
age: {
state,
setState
}

}
  */
const EventMap = {
  'text': 'input',
  'number': 'input',
  'submit': 'click'
}
import { useEffect, useState } from 'react'
export default class FormCheck {
  constructor(formRef, elClass, {
    formData,
    validators,
    pass,
    noPass,
    handleSubmit
  }) {
    this.formRef = formRef
    this.elClass = elClass
    this.formData = formData
    this.validators = validators
    this.pass = pass
    this.noPass = noPass
    this.handleSubmit = handleSubmit

    FormCheck.stateMap = FormCheck.createStateMap(this.formData)
    useEffect(() => {
      this.bindEvent()
    }, [])
  }

  bindEvent() {
    const oFormElements = this.formRef.current.querySelectorAll(this.elClass)
    oFormElements.forEach(el => {
      const { type } = el
      console.log({
        type
      })
      el.addEventListener(EventMap[type], this.setState.bind(this, el), false)
      // el.addEventListen()
    })
  }

  setState(el) {
    const { value, name: key, type } = el
    const { state, setState } = FormCheck.stateMap[key]
    console.log({
      value
    })
    setState(value)
  }

  static createStateMap(formData) {
    /*  [state,setState] = useState(***)
     * {
     *   realname: {
     *     state,
     *     setState
     *   }
     * }
     */

    const stateMap = {}
    for (let key in formData) {
      const [state, setState] = useState(formData[key])
      stateMap[key] = {
        state,
        setState
      }
    }

    return stateMap
  }

  static create(formRef, elClass, {
    formData,
    validators,
    pass,
    noPass,
    handleSubmit
  }) {
    new FormCheck(
      formRef,
      elClass,
      {
        formData,
        validators,
        pass,
        noPass,
        handleSubmit
      }
    )
    return FormCheck.stateMap
  }
}
